<template>
  <div class="app-page">
    <img class="logo" src="/@/assets/images/logo/logo.png" alt="" />
    <h1 class="h1">欢迎来到哈银金融</h1>
    <!-- <div class="tabs">
      <div class="tab" :class="{ active: activeTab == 'mobile' }" @click="onChangeWay('mobile')">
        <span :style="{ background: activeTab == 'mobile' ? '#eb5f18' : '#bbbdbf' }"></span>
        使用手机号登录
      </div>
      <div class="tab" :class="{ active: activeTab == 'userName' }" @click="onChangeWay('userName')">
        <span
          :style="{
            background: activeTab == 'userName' ? '#eb5f18' : '#bbbdbf',
          }"
        ></span>
        使用账号登录
      </div>
    </div> -->
    <a-form ref="formRef" :model="loginForm" :rules="rules">
      <a-form-item prop="loginName">
        <a-input class="elInput" size="large" v-model:value.trim="loginForm.loginName" placeholder="请输入账号">
          <template #prefix>
            <span class="jia86">+ 86</span>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item label="" prop="password">
        <a-input-password
          class="elInput"
          v-model:value="loginForm.password"
          autocomplete="on"
          :type="showPassword ? 'text' : 'password'"
          placeholder="请输入密码"
        />
      </a-form-item>
      <a-form-item label="" prop="captchaCode">
        <a-input class="elInput" size="large" v-model:value.trim="loginForm.captchaCode" :placeholder="'请输入验证码'">
          <template #suffix>
            <img class="captcha-img" :src="captchaBase64Image" @click="getCaptcha" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item label="" prop="type">
        <a-checkbox-group style="height: 24rem">
          <a-checkbox value="read">
            <span class="read"> 同意 <span>《用户使用协议》</span> 及 <span>《建私权政策》</span> </span>
          </a-checkbox>
        </a-checkbox-group>
      </a-form-item>
      <el-form-item>
        <div class="login-btn" @click="onLogin">进入哈银</div>
      </el-form-item>
    </a-form>
  </div>
  <!-- <div class="login-container">
   
    <div class="box-item login">
      <div class="login-title">账号登录</div>
      <a-form ref="formRef" class="login-form" :model="loginForm" :rules="rules">
        <a-form-item name="loginName">
          <a-input v-model:value.trim="loginForm.loginName" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item name="password">
          <a-input-password
            v-model:value="loginForm.password"
            autocomplete="on"
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入密码：至少三种字符，最小 8 位"
          />
        </a-form-item>
        <a-form-item name="captchaCode">
          <a-input class="captcha-input" v-model:value.trim="loginForm.captchaCode" placeholder="请输入验证码" />
          <img class="captcha-img" :src="captchaBase64Image" @click="getCaptcha" />
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model:checked="rememberPwd">记住密码</a-checkbox>
        </a-form-item>
        <a-form-item>
          <div class="btn" @click="onLogin">登录</div>
        </a-form-item>
      </a-form>
    
    </div>
  </div> -->
</template>
<script setup>
  import { message, notification, Button } from 'ant-design-vue';
  import { onMounted, onUnmounted, reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { loginApi } from '/@/api/system/login-api';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { LOGIN_DEVICE_ENUM } from '/@/constants/system/login-device-const';
  import { useUserStore } from '/@/store/modules/system/user';
  import zhuoda from '/@/assets/images/1024lab/zhuoda-wechat.jpg';
  import loginQR from '/@/assets/images/login/login-qr.png';
  import gzh from '/@/assets/images/1024lab/gzh.jpg';
  import wechatIcon from '/@/assets/images/login/wechat-icon.png';
  import aliIcon from '/@/assets/images/login/ali-icon.png';
  import douyinIcon from '/@/assets/images/login/douyin-icon.png';
  import qqIcon from '/@/assets/images/login/qq-icon.png';
  import weiboIcon from '/@/assets/images/login/weibo-icon.png';
  import feishuIcon from '/@/assets/images/login/feishu-icon.png';
  import googleIcon from '/@/assets/images/login/google-icon.png';

  import { buildRoutes } from '/@/router/index';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { encryptData } from '/@/lib/encrypt';
  import { h } from 'vue';
  import { localSave } from '/@/utils/local-util.js';
  import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
  import { useRzApplyStore } from '../../../store/modules/system/rzApply';

  //--------------------- 登录表单 ---------------------------------
  const rzApplyStore = useRzApplyStore();
  const loginForm = reactive({
    loginName: '',
    password: '',
    captchaCode: '',
    captchaUuid: '',
    loginDevice: LOGIN_DEVICE_ENUM.PC.value,
  });
  const rules = {
    loginName: [{ required: true, message: '用户名不能为空' }],
    password: [{ required: true, message: '密码不能为空' }],
    captchaCode: [{ required: true, message: '验证码不能为空' }],
  };

  const showPassword = ref(false);
  const router = useRouter();
  const formRef = ref();
  const rememberPwd = ref(false);

  onMounted(() => {
    document.onkeyup = (e) => {
      if (e.keyCode == 13) {
        onLogin();
      }
    };

    //notification['success']({
    //  message: '温馨提示',
    //  description: 'SmartAdmin 提供 9种 登录背景风格哦！',
    //  duration: 8,
    //  onClick: () => {},
    //  btn: () =>
    //    h(
    //      Button,
    //      {
    //        type: 'primary',
    //        target: '_blank',
    //        size: 'small',
    //        href: 'https://smartadmin.vip/views/v3/front/Login.html',
    //        onClick: () => {},
    //      },
    //      { default: () => '去看看' }
    //    ),
    //});
  });

  onUnmounted(() => {
    document.onkeyup = null;
  });

  //登录
  async function onLogin() {
    formRef.value.validate().then(async () => {
      try {
        SmartLoading.show();
        // 密码加密
        let encryptPasswordForm = Object.assign({}, loginForm, {
          password: encryptData(loginForm.password),
        });
        const res = await loginApi.login(encryptPasswordForm);
        stopRefrestCaptchaInterval();
        localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token ? res.data.token : '');
        message.success('登录成功');
        //更新用户信息到pinia
        useUserStore().setUserLoginInfo(res.data);
        //构建系统的路由
        buildRoutes();
        router.push('/home');

        rzApplyStore.clear();
      } catch (e) {
        if (e.data && e.data.code !== 0) {
          loginForm.captchaCode = '';
          getCaptcha();
        }
        smartSentry.captureError(e);
      } finally {
        SmartLoading.hide();
      }
    });
  }

  //--------------------- 验证码 ---------------------------------

  const captchaBase64Image = ref('');
  async function getCaptcha() {
    try {
      let captchaResult = await loginApi.getCaptcha();
      captchaBase64Image.value = captchaResult.data.captchaBase64Image;
      loginForm.captchaUuid = captchaResult.data.captchaUuid;
      beginRefrestCaptchaInterval(captchaResult.data.expireSeconds);
    } catch (e) {
      console.log(e);
    }
  }

  let refrestCaptchaInterval = null;
  function beginRefrestCaptchaInterval(expireSeconds) {
    if (refrestCaptchaInterval === null) {
      refrestCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
    }
  }

  function stopRefrestCaptchaInterval() {
    if (refrestCaptchaInterval != null) {
      clearInterval(refrestCaptchaInterval);
      refrestCaptchaInterval = null;
    }
  }

  onMounted(getCaptcha);
</script>
<style lang="less" scoped>
  .app-page {
    width: 100vw;
    height: 100vh;
    background-color: #fcf9f9;
    position: relative;
    padding: 70rem 160rem;
    box-sizing: border-box;
    &::after {
      width: 60%;
      height: 100%;
      background-image: url(/@/assets/images/company.png);
      background-size: cover;
      background-repeat: no-repeat;
      position: absolute;
      right: 0;
      top: 0;
      content: '';
    }
    .logo {
      width: 453rem;
      height: 65rem;
      margin-bottom: 120rem;
    }
    .h1 {
      font-family: Microsoft YaHei;
      font-size: 54rem;
      color: #283061;
      font-weight: normal;
      line-height: 55rem;
      margin-bottom: 15rem;
    }
    .tabs {
      display: flex;
      align-items: center;
      margin-bottom: 48rem;
      .tab {
        font-family: Microsoft YaHei;
        font-size: 18rem;
        line-height: 55rem;
        color: #bbbdbf;
        display: flex;
        align-items: center;
        margin-right: 55rem;
        span {
          display: inline-block;
          width: 7rem;
          height: 20rem;
          margin-right: 11rem;
        }
      }
      .active {
        color: #eb5f18;
      }
    }
    .jia86 {
      height: 36rem;
      line-height: 36rem;
      display: inline-block;
      font-family: Microsoft YaHei;
      font-size: 16rem;
      color: #434444;
      padding-right: 35rem;
      border-right: 2rem solid #bcbaba;
    }
    .elInput {
      width: 499rem;
      height: 70rem;
      background: #fcf9f9;
      border-radius: 34rem !important;
      overflow: hidden;
      outline: none;
      border: 2rem solid #bcbaba !important;
      background-color: none;
      font-size: 16rem;
    }
    .ant-form-item {
      margin-bottom: 32rem;
    }
    /deep/.is-focus {
      box-shadow: none !important;
    }
    /deep/ .ant-input__wrapper {
      box-shadow: none !important;
      padding: 1rem 20rem;
    }
    /deep/ .ant-form-item__error {
      font-size: 16rem;
    }
    /deep/ .ant-form-item.is-error .el-input__wrapper {
      box-shadow: none;
    }
    /deep/.ant-checkbox .ant-checkbox-inner {
      width: 24rem !important;
      height: 24rem !important;
    }
    .ant-checkbox__inner:after {
      height: 7rem;
      left: 4rem;
    }
    .read {
      font-family: Microsoft YaHei;
      font-size: 16rem !important;
      color: #9a9b9b;
      line-height: 55rem;
      span {
        color: #eb5f18;
      }
    }
    .login-btn {
      width: 252rem;
      height: 73rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 31rem;
      color: #ffffff;
      line-height: 73rem;
      background: #eb5f18;
      border-radius: 36rem;
      text-align: center;
    }
  }
</style>
